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CHAPTER 


CREATING ANIMATION 
FOR THE WEB 


Creating Animated GIFs 


In this chapter, you will: 
* Learn about animation 
* Work with the Animation and Layers palettes 
* Create GIF animations with ImageReady 
* Optimize and save animations 
* Use animation in a Web page 


B a is an optical illusion that you take advantage of every day. If 
objects had to move so that your eyes could see them as moving, there 
would be no film or television industry. Fortunately, when you look at 
sequences of still images you can perceive motion. For the purposes of this 
chapter, any Web-based motion is referred to as animation, whether it is 
cartoon-like or photographic. 


You can use many file formats to create animation on the Web, but the most 
common is the GIF format. This chapter explains how to use ImageR eady 
to create and use animated GIF images. 


ImageReady, like most other Web animation programs, lets you create a 
sequence of images that appear as an animation when played in quick suc- 
cession. However, ImageReady allows more control over the images than do 
many other tools, and offers additional features that make it easier to create 
animated GIF files. This means that ImageReady also has more options for 
you to understand and explore. 


One of the most common uses for animation on the Web is in banner adver- 
tising. This chapter covers everything you must know to create and use animated 


GIFs, whether for advertising or other use. 
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UNDERSTANDING ANIMATION 


Animation literally adds another dimension to Web graphics. Instead of having only three 
dimensions—width, height, and (color) depth—animation provides a fourth dimension 
of time. Several image formats support animation, but most require sophisticated author- 
ing or programming and force the end user to play the animation in a special player or 
plug-in. The only format that supports animation and can be displayed in all browsers is 
the Graphics Interchange Format (GIF). 


The following sections offer guidelines for using the illusion of animation, creating ani- 
mated content, and creating animated GIFs. 


Using the Illusion of Animation 


Animation works because of a phenomenon called persistence of vision. When you view 
a quick succession of still images, persistence of vision makes you think you see motion. 
There is no real motion in an animation, film, video, or paper flip-book. In all cases, a 
set of static images is shown sequentially. If the sequential display of the images is fast 
enough, you experience the illusion of motion. 


You can see an example of the illusion of motion by opening file 9-1.gif on your Data 
Disk in a Web browser. This animation has only two frames and lasts one second before 
repeating. Although it is simple, it does create the illusion that the red bar is flipping up 
and down, rotating around the lower-left end of the line. The only difference between 
this motion and the motion in video or film is the speed. 


All animation media have a standard frame rate, measured in frames per second, or 
fps. Film has 24 frames for every second, but each frame is shown three times, making 
an effective frame rate of 72 fps. Partially to save film and partially because the equip- 
ment was not as sophisticated as today, moviemakers from the early part of the twenti- 
eth century used a frame rate of only 16 fps. This slow frame rate creates a jumpy quality 
and the motion is not smooth. 


Video has 30 frames in each second, but each frame is divided into two fields, so the 
effective frame rate is 60 fps. When video is shown on the Web, it might have a frame 
rate as fast as 30 fps, although it is more common to cut the rate to 15 fps. This slow 
frame rate makes the frames flicker visibly during playback, but it also halves the mem- 
ory and download time required to play video online. 


Creating Animated Content 


If you want sophisticated animations in your Web pages, you should use a video-creation 
program such as Adobe AfterEffects to generate QuickTime or Moving Picture Experts 
Group (MPEG) animations. You then can create video-quality animations at 30 frames 
per second, which is fast enough to show smooth motion with no flicker. While these 
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animations can be impressive, the file size is often at least one megabyte for a brief half- 
screen animation. 


Animations this long are not practical on the Web, however. The time it takes to down- 
load a video with a file size of 1 MB will probably discourage users from viewing your 
work. Because of time and bandwidth constraints, you need to use animation files that 
can be downloaded quickly. The format of choice for Web animation is GIE Unlike the 
JPEG and PNG formats, GIF supports animation. The main advantage of GIF anima- 
tions over other formats is that it is the only one supported natively in all browsers. Every 
other animation format requires a plug-in or external player to view the animation. 


Because GIF animations use bitmaps, longer animations result in larger file sizes. You 
should use GIF only for short, simple animations. If you want longer animations, create 
MPEG or QuickTime movies that download separately. Because GIF supports only 8-bit 
color, photographic images often appear banded. QuickTime and MPEG are good 
choices if you want photographic-quality video. 


If you want more complex online animation that does not have to be downloaded sep- 
arately, consider creating a vector-based animation such as a Flash movie. Because they 
are vector-based, Flash movies cannot be photorealistic. Flash animations have smaller 
file sizes and are faster to download than QuickTime movies. 


ShockWave movies are similar to Flash movies, but can include complex interactivity. 
Similarly, Java applets can be very interactive, but require high levels of programming 
to create. 


So, for Web animations, use animated GIFs. For slightly more complex animations, use 
a Flash Movie. If you need the animation to be interactive, consider using ShockWave 
or Java. For photorealistic movies, such as video clips, use QuickTime or MPEG. Table 9-1 
details the comparative strengths of different Web animation formats. 


Table 9-1 Comparison of Web animation formats 


Works without plug-in | Supports sound | Interactive | Supports high-color 
or special coding photographic video 
on all browsers animation 


GIF 
QuickTime 


MPEG 
Flash 
ShockWave 


If none of these formats suits your needs, consider streaming video. Streaming video for- 
mats, such as those available for RealMedia’s RealPlayer and the Microsoft Windows 
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Media Player, have all of the features and advantages of a QuickTime or MPEG movie, 
but can be played before they are completely downloaded. Normally, a large video or 
animation clip, such as a QuickTime movie, must be downloaded completely before you 
can play it. Streaming audio and video allows you to start playing the file before it has 
finished downloading. It uses a buffer of a few seconds which causes the playback to 
lag behind the download. If the playback catches up to the data currently downloading, 
the stream ceases and the playback pauses until more of the file has downloaded. 


Most of these sophisticated and streaming video animation formats and their creation 
are specialized subjects, requiring books and classes of their own. Some people devote 
their entire careers to specific formats such as Flash or streaming video. 


Because GIFs are the most common animation format, the rest of this chapter covers 
creating animated GIFs. 


Creating Animated GIFs 


Animated GIFs have several advantages over other animation formats. They require no 
special coding, are supported by all browsers without requiring a plug-in, and support 
transparency. The restrictions of animated GIFs are that they cannot be interactive, other 
than being used as a button users can click like any other Web graphic, and they cannot 
include sound. 


An animated GIF image is like any other GIF image except that one animated GIF file 
contains multiple individual GIF images, which then are displayed in order like a slide 
show. Each image includes information about how long it should play before the next 
image is shown. The file also includes information about whether to repeat the sequence 
after the last frame is displayed, and if so, how many times. 


The specification for animating GIF images is called GIF89a, but you do not need to 
refer to the exact name when creating animated GIFs or using them in Web pages. You 
can just use the .gif file extension as you would with any GIF image. 


Unlike almost everything else related to the Web, the specifications for animated GIFs have 
not changed in over 10 years. The new programs that create animated GIFs have the same 
basic functions as GIF animation programs from the mid-1990s. The ImageReady interface 
makes creating animated GIFs easier than some other tools, but the final product is the same. 


This chapter assumes you are using ImageReady for the exercises. However, you can use 
many other freeware and commercial applications instead of ImageReady to create 
animated GIFs. 


WORKING WITH THE ANIMATIONS AND LAYERS PALETTES 


When creating animated images, ImageReady is not as intuitive as other animation pro- 
grams. Most tools work by taking a set of images you have created, and then converting 
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them into an animated GIF ImageReady also uses this basic approach, but in addition 
lets you insert different images or modify single images over multiple frames. There is 
no limit to the number of frames in an animated GIF 


Creating animated GIFs in ImageReady requires using the Animation palette and the 
Layers palette. Both can be tricky to work with because you must always be aware of 
which frames and layers are selected. The Animation palette shows each frame in the 
animation in sequence from left to right. The Layers palette shows all the actual and 
potential image information in any of the frames. The use of layers differentiates 
ImageReady from many other GIF animation programs. 


Like any other image composed in ImageR eady, an animation can contain multiple layers, 
each of which can be moved and edited independently of the other layers. By default, 
any image opened or created in ImageReady is treated as an animation with only one 
frame, which is one way to describe a static image. As soon as you have at least two 
frames, the static image becomes an animation. 


Using the Animation Palette 


In the Animation palette, shown in Figure 9-1, you can add, delete, and modify frames. 
When you open any image in ImageReady, it is automatically displayed as the initial 
frame of an animation in the Animation palette. 


Frames 


Delete 


Duplicate Frame button 


Tween button 


Player controls 


Figure 9-1 The Animation palette 


To create a simple animation with the Animation palette: 
1. In ImageReady, open the file named snowman.gif from the Data Disk. 


2. If necessary, show the Animation palette by clicking Window on the menu 
bar, and then clicking Show Animation. 


3. Add a frame by clicking the Duplicate Frame button at the bottom of the 
Animation palette, or by selecting New Frame from the Animation palette 
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menu. The new frame is added after the selected frame and retains all the 
properties of the selected frame. 


. Select the new frame in the Animation palette. The current frame opens in 


the Image window, and is indicated by a narrow white border around the 
frame. You can select multiple frames by holding down the Shift key or the 
Command key (Ctrl key in Windows) and clicking the other frames. Selected 
frames are indicated by a blue highlight around the frame in the Animation 
palette. When multiple frames are selected, only the current frame appears in the 
document window. Figure 9-2 shows selected frames in the Animation palette. 


Unselected frame 


Current frame 


Selected frames 


Figure 9-2 Selected frames in the Animation palette 


5. 


Modify the duplicated frame. Use the Move tool to drag the image a few 
pixels to the right in the document window. Now each of the two frames 
shows a slightly different version of the same image. 


. Rearrange the frames by dragging them within the Animation palette. 


. Reverse the sequence of the frames by selecting multiple frames and selecting 


Reverse Frames from the Animation palette menu. 


. Add a third frame, and then delete it by selecting Delete Frame from the 


Animation palette menu, clicking the trash can icon, or dragging the frame 
to the trash can icon. 


. Click File on the menu bar, and then click Save Optimized As to save the 


animation to your Chapter 9 project folder as snowman.gif. 


Choosing All from the Select menu selects all of the pixels in the image area, 
not all of the frames in the Animation palette. 
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Copying and Pasting Frames 


Duplicating a frame creates a new frame that shows the same layers as the original frame. 
Copying and pasting a frame creates a new frame and also duplicates all the layers shown 
in the original frame. To copy and paste frames, select Copy Frame and Paste Frame from 
the Animation palette menu. When you use the Paste Frame option, you have a num- 
ber of options: 


a Replace Frames deletes the currently selected frame and replaces it with 
the copied frame. 


m Paste Over Selection does not add or replace any frames. This option adds 
the copied layers to the currently selected frame. 


m Paste Before Selection and Paste After Selection add a new frame with 
copied layers either before or after the selected frame. 


You can delete an entire animation by selecting Delete Animation from the Animation 
palette menu. While this removes all but the first frame, it leaves all layers intact. 


Playing Animations 


The Animation palette contains playback buttons similar to those on any media device, 
as shown in Figure 9-3. Use these buttons to play the animation, which appears in the 
Image window. You also can stop the animation, step forward or backward a frame at a 
time, or rewind to the first frame. The animation plays at the speed determined by the 
delay settings for each frame. Timing of playback is covered in the next section. 


You also can preview animations in a browser. This is recommended, as not all anima- 
tion features work properly when previewed in ImageReady. 


imation X, Rollover X,Image Map X, Slice N 


Stop 
Play 


Step forward one frame 


Forever Y | 5| Xll 


Step back one frame 


Rewind to first frame 
Looping options 


Figure 9-3 Player controls in the Animation palette 


To preview an animation: 


1. With snowman.gif still open, click the Looping Options list arrow, and then 
click Forever. 
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2. Click the Play button in the Animation palette. Note that each frame is 
selected in turn in the Animation palette as it appears in the Image window. 


3. Click the Stop button to pause the playback. 


4. To preview an animation in a Web browser, click the Preview in Default 
Browser button in the toolbox, shown in Figure 9-4. Alternately, click File 
on the menu bar, click Preview In, and then click the browser you want to 
use. 


5. Click the Stop button in the browser or press Esc to stop the animation. 
6. Click the Refresh or Reload button to begin playing the animation again. 


7. Close the browser. 


il snowman.gif @ 100% (D... | {Of x! 


~6.4K /12.33K GIF Y 


Preview animation in a Web browser 


Figure 9-4 The Preview in Default Browser button 


Previewing in a browser is important as the browser shows the true playback speed and 
transparency. The browser preview also shows the HTML code necessary to use an ani- 
mation in a Web page. A sample preview window is shown in Figure 9-5. 


Although you can view an animation file in Photoshop, you cannot see the animation. 
View animations in Photoshop to take advantage of filters or other tools not available 
in ImageReady, such as the Add Noise filter or Gradient tool. One task you can per- 
form in Photoshop is editing individual layers. However, you should avoid adding or 
rearranging layers because this might ruin some of the animation effects when you view 
the animation later in ImageReady. 
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[ Address Je C:\TEMP\ImageReady\T argetPreview1Ü4*snowman.html 


Format: GIF 

Dimensions: 147w x 147h 

Size: 12.33K 

Settings: Custom, 128 Colors, 100% Diffusion Dither, 2 frames, Transparency on, Non-Interlaced, 
0% Web Snap 


<HTML> 

<HEAD> 

<TITLE>snowman</ TITLE> 

«METÀ HTTP-EQUIV-"Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
</HEAD> 

<BODY BGCOLOR=#FFFFFF> 

<!-- ImageReady Slices (snowman.gif) --> 
«IMG SRC-"snowman.gif" WIDTH=147 HEIGHT=147> 
<!-- End ImageReady Slices --> 

</BODY> 

</HTML> 


Figure 9-5 Previewing an animation in a Web browser 


Using the Layers Palette 


When creating animated GIFs in ImageReady, you do all of your work in the Animation 
and Layers palettes. Each frame in the animation is represented by one frame in the 
Animation palette. Each frame also has a number of layers associated with it, indicated 
by the visibility icons in the left column of the Layers palette, as shown in Figure 9-6. 
A layer, as defined in the Creating and Using Background Images chapter, is part of an 
image that can be moved in front of or behind other layers like sheets of clear plastic. 
When creating an animation, you can have multiple layers but only one frame, and you 
can have multiple frames but only one layer. A frame can include all the layers in an 
image, some of the layers, or no layers. Different frames can display the same layers. 
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The selected frame has 
both layers visible 


The selected frame 
appears in the document 
window 
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Figure 9-6 The Layers palette in ImageReady 


Adding Layers 


You often need to animate a specific element in an animation while keeping the background 
motionless. To do this, you need to place the moving element in a separate layer. When you 
add a layer to the Layers palette, the layer becomes visible in all frames in the animation. 


'To add a layer: 


1. With snowman.gif still open, move the snowman in the second frame so it 
matches the position of the snowman in the first frame. 


2. Select Add Layer To New Frames from the Animation palette menu. This 
causes ImageReady to automatically create a new layer for any frame you create. 


3. Open shadow.gif from the Data Disk. 


4. Select All from the Select menu and press Command + C (Ctrl+C for 
Windows) to copy the selected area. 


5. Paste the selection into snowman.gif. A new layer is created for the shadow. 
6. In the Layers palette, drag the shadow layer below the layer containing the 
snowman. Your work environment should resemble that shown in Figure 9-6. 
Changing the Visibility of Layers 


When you duplicate frames, all the aspects of the original frame are retained in the new 
frame, including which layers are visible. To control which layers are visible for a par- 
ticular frame, first select the frame in the Animation palette, and then select and dese- 
lect the visibility icons in the Layers palette. 
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To change the visibility of layers of frames in ImageReady: 


1. With snowman.gif still open, select the second frame in the Animation 
palette. In the Layers palette, deselect the eye icon next to the layer contain- 
ing the shadow to make the shadow invisible. 


2. Click the Next Frame button in the Animation palette to step through the 
animation sequence two or three times. The first frame of the animation con- 
tains the shadow and the second does not. As you play the animation, the 
shadow will blink on and off, and the visibility icon next to the shadow layer 
will turn on and off accordingly. 


Figure 9-7 shows the Animation and Layers palette with visibility disabled for one layer. 
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The selected frame uses 
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Figure 9-7 Disabled visibility 


Editing Layers 


The key to creating animations with ImageReady is editing the layers in the Layers 
palette so that they change from one frame to the next. If the layers did not change, 
every frame in the animation would be identical. 


At any time while editing an animation sequence, you will have one or more frames 
selected, and only one layer selected. Whenever you select a layer, it becomes visible in 
the selected frames. When editing a layer, your edits might affect only the current frame 
or a group of frames. Frame-specific changes affect only the current frame, even if other 
frames also show the layer. Adjusting a layer's opacity, position, or style changes those 
options for only the selected frame. Other frames that show the same layer do not reg- 
ister these edits. This allows you to animate single layers that change over time. 


352 


Chapter 9 Creating Animation for the Web 


Global changes, however, affect all frames in an animation. These include any color 
changes, filters, type, and most other edits. All frames that show the layer will show global 
changes whether the frames are selected at the time or not. 


To edit animation layers in ImageReady: 
1. With snowman.gif still open, make both layers visible for both frames. 


2. Select the second frame. Select the layer containing the shadow and set the 
opacity to 50% in the Layers palette. 


3. Step through the animation. The layer changes opacity across frames. This is a 
frame-specific edit. 


4. Select the Paintbrush tool and set the foreground color to black, if neces- 
sary. In the layer containing the snowman, add three coal buttons to the 
front center of the snowman. This is a global change and affects all frames 
that display this layer. 


5. Click File on the menu bar, click Save Optimized As to save the anima- 
tion to your Chapter 9 project folder as snowman.gif, and then close 
snowman.gif and shadow.gif. 


Figure 9-8 shows the Animation and Layers palette with these new changes. 
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Figure 9-8 Global and frame-based changes 


Editing Existing Animations 


A good way to practice using the different animation features of ImageReady is to open 


and edit existing files. You can edit animated GIFs, QuickTime movies, and Photoshop 


images with multiple layers. 
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To open an animated GIF click File on the menu bar and then click Open. The anima- 
tion opens with a set of frames and layers where each layer corresponds to one frame. The vis- 
ibility for all layers is turned off except for the corresponding frame, as shown in Figure 9-9. 
Frame 1 uses only the first layer, frame 2 uses only the second layer, and so on. 


ig Untitled-1 @ 100% (Optimized) E ES 
Orig LET : s Layers X History S Actions NN (>) 


[norma T | Opacity: [ 00% » | 
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100% w [2363K /9sec e 288K.v | -1M/2363KGF * 7 JW Frame 3 has visibility 
enabled only for the 
third layer 


Figure 9-9 Selective visibility for individual frames 


You also can create animated GIFs from Photoshop images that have multiple layers. In 
this situation, the Animation palette shows only one frame and the Layers palette shows 
all the layers or individual images. To convert these layers to animation frames, select 
Make Frames From Layers in the Animation palette menu. This creates one frame for 
each layer in the Layers menu, using the bottom layer as the first frame. 


Additionally, you can create animations from folders of individual images. The images 
can be in any format. To import a folder of separate images, first place all the images for 
the animation in a folder. The images will be inserted into the Animation palette in 
alphabetical order, so name the images accordingly. You will get better results if the 
images are already sized identically. If the source images are of different sizes, the dimen- 
sions of the animation will be based on the dimensions of the first frame, and all other 
frames will be cropped or padded accordingly. 


To import a folder of separate images: 


1. In ImageReady, click File on the menu bar, point to Import, and then click 
Folder as Frames. Find and select the folder named fox on the Data Disk. 
Four image files are opened, appearing as four separate layers in the Layers 
palette. Four frames also are generated in the Animation palette, with each 
frame corresponding to one layer. 
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2. Step through the animation, noting the visibility icons in the Layers palette. 
For each frame, all layers are invisible except the associated layer. 


3. Click File on the menu bar, and then click Save Optimized As to save the 
animation to your Chapter 9 project folder as foxy.gif. 


CREATING ANIMATIONS WITH IMAGEREADY 


Many programs can create GIF animation files. Most of these programs work by import- 
ing a folder of discrete files, as described in the previous section. ImageR eady also allows 
you to create an animation from a single image file. To do so, duplicate the original frame 
and make frame-based changes to each new frame. 


Whether you use ImageReady or another program, GIF animation allows you to set the 
duration of frames and to set how often the animation repeats. 


Controlling the Timing of Animations 


What makes animations different from static images is that an animation contains mul- 
tiple images, appearing as separate frames. For each frame, you can adjust how long the 
images appear. Showing each frame for a few seconds creates a slide show; showing each 
frame for a fraction of a second creates the illusion of motion. Animated GIFs differ from 
traditional animations in how they are timed. Film and video are time-based and have 
strict frame rates that dictate how many frames are displayed in a second, and each frame 
appears only once. 


In contrast, GIF animation is frame-based—each frame can appear for a different dura- 
tion. The length of a GIF animation is set not only by the number of frames, but also 
by the display duration of each frame and the number of times the frame sequence 
repeats. For example, a two-frame animation where each frame appears for half a second 
creates a one-second animation. Adding two more frames and lengthening the display 
duration to one second per frame creates a four-second animation. 


Adjusting the Delay 


Film and video use a standard frame rate that affects all frames equally. Each frame of 
film appears on the screen for 4: of a second, and each frame of video appears for 40 of 
a second. Unlike film and video, the frames of a GIF animation can each have a differ- 
ent display time. You could set one frame to appear for Ao of a second and another frame 
to appear for a few minutes. 


The delay setting for each frame appears at the bottom of the frame below the thumb- 
nail image in the Animation palette. Times are listed in seconds and fractions of seconds, 
which are shown as decimals. Select a frame or set of frames and click the delay value 
under one of the frames to open the Frame Delay menu, shown in Figure 9-10. The 
current delay time appears at the bottom of the list. 
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Figure 9-10 Changing the frame delay 


To change the frame delay: 


1. 
2: 


Open 9-1.gif from the Data Disk. 


Click the delay value below frame 1 in the Animation palette. This displays 
the Frame Delay shortcut menu. 


. Click 5.0 to set the delay to five seconds. This corresponds to the length of 


time you want frame 1 to appear. You can select one of the preset times, No 
Delay, or Other to open the Set Frame Delay dialog box where you can enter 
another time. 


. Set the delay of the second frame to 2.0 seconds. Each frame in an animation 


can have a different delay. 


. Play the animation. The delay is so long that there is no appearance 


of motion. 


. Click File on the menu bar, and then click Save Optimized As to save the ani- 


mation to your Chapter 9 project folder as 9-1a.gif, and then close the image. 


Delay times are set in increments of 1/100 of a second. The longest possible delay is 
240 seconds, which equals four minutes. You seldom need to use such a long delay. 
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You could set each frame to delay for 0.03 seconds, which would result in a frame rate 
of 30 frames per second—equal to the frame rate for video. In this way, you can simu- 
late standard video using GIF animation. However, to display even one second of video 
this way requires using an enormous file that would take a long time to download. 


The shortest delay possible is No Delay. This means the computer displays the anima- 
tion as quickly as it can. The speed of the playback then depends on the memory and 
processor speed of the computer on which it is played, rather than on your settings. If 
you choose this option, be aware that the playback you see on your computer does not 
always match what others see on their computers. If your computer is slow, the anima- 
tion might play at an appropriate speed. But when a user views the animation in a Web 
page on a fast computer, it will play too fast. 


You should always preview your animations in a Web browser. The delay times may not 
be accurate when viewing them in ImageReady. 
Adjusting the Number of Loops 


You can set the animation so that the sequence of frames plays only once, repeats indef- 
initely, or repeats for a set number of times. 


Specify the looping of the animation by clicking the Looping list arrow in the lower- 
left corner of the Animation palette, as shown in Figure 9-11. 


Animation “(Rollover V, mage Map V, Slice x 


Figure 9-11  Looping options 


Select Once to play the animation only one time. When finished, the last frame remains 
on-screen like a static image. Select Forever to repeat the animation indefinitely. In a Web 
browser, the animation will loop until someone clicks the browser’s Stop button. Select 
Other to open the Set Loop Count dialog box. Enter the number of times you want the 
animation to repeat. The number of loops does not affect the size of the animation file. 


The looping feature affects the entire animation—if you set the animation to loop once, 
it plays the entire sequence, from the first frame to the last, and then starts again with 
the first frame. Looping does not repeat individual frames or groups of frames within 
the sequence. To repeat frames within an animation, duplicate the frames and drag them 
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to the proper position in the sequence. Although the information is duplicated, this still 
increases the animation file size. 


To change the frame delay: 
1. Open foxy.gif if it is not still open. 


2. Click the Looping list arrow in the lower-left corner of the Animation 
palette, and select Other. 


3. In the Set Loop Count dialog box, type 3 to specify that you want to play 
the animation three times and then stop. 


4. Play the animation. It should cycle through three times, and then stop on the 
last frame. 


5. Click File on the menu bar, and then click Save Optimized As to save the 
animation to your Chapter 9 project folder as foxy_a.gif, and then close the 
animation. 


Using Frame Animation 


The simplest type of GIF animation uses one image for each frame. In ImageReady, this 
1s represented by a sequence of frames and a stack of layers where each frame corre- 
sponds to one layer and vice-versa. You can see this whenever you open an animated 
GIF in ImageR eady. 


Although the final animation will resemble a simple frame animation, with a different 
layer for each frame, you can reuse layers across multiple frames. You can create an entire 
animation out of a single layer by changing the position, opacity, or effects of the layer 
across multiple frames. 


To create an animation using a single layer: 


1. In ImageReady, open ball.gif from the Data Disk. This file contains one 
frame in the Animation palette and one layer in the Layers palette. Figure 9-12 
shows the appearance of the Animation and Layers palettes. 


2. In the Animation palette menu, deselect Add Layer To New Frames. You 
do not need any additional layers. 


3. Click the Animation palette menu arrow, and click Copy Frame. 


4. Click the menu arrow again, and choose Paste Frame. In the Paste Frames 
dialog box, click the Paste After Selection option button. Repeat this step 
to duplicate the frame. You should have three identical frames, but only one 
layer in the Layers palette. 
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Figure 9-12 The Animation and Layers palettes before frame animation 


5. 


Select the first frame, and then use the Move tool to drag the ball in the 
Image window to the top edge of the image area. This does not affect the 
position of the layer in the other frames. 


. Select the third frame and drag the ball to the bottom edge of the image area. 


7. Select the second frame and drag the ball to about one-third from the 


11. 


bottom edge of the image area. 


. Duplicate the second frame, and then drag the new frame to the right of 


the Animation palette. The Animation palette should look like the one in 
Figure 9-13. 


. Click the Play button to see the ball bounce up and down in the image area. 


10. 


Select the first frame again and set the opacity of the layer to 33% in the 
Layers palette. 


Select the second and fourth frames and set the opacity to 67%. 
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Figure 9-13 The Animation palette during frame animation 


12. Click the Play button again to see the object fade in as it moves through the 
image area. The Animation palette should look like the one in Figure 9-14. 
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Figure 9-14 The Animation palette after frame animation 
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13. Click File on the menu bar, then click Save Optimized As to save the ani- 
mation to your Chapter 9 project folder as bounce.gif, and then close the 
animation. 


You can move single layers, or adjust opacity for single frames, but you cannot transform 
(scale, rotate, etc.) a layer without affecting every frame that calls it. 


Tweening 


Just as you manually modified position and opacity of a single layer across frames in the 
previous example, you can automatically modify multiple layers across frames with the 
Tween command. Tween is short for “in betweening;" which is creating the intermedi- 
ary frames that appear between two existing frames. For example, instead of having to 
manually position a layer and set the opacity for every frame, you can save time by mak- 
ing the adjustments for just the first and last frame and have ImageReady calculate the 
necessary frames between the first and last. 


Use the Tween command to add or modify frames between two existing frames. Then 
set the position, opacity, or effect of the tweened frames to create the appearance of 
movement. For example, if you want to fade out a layer, set the opacity of the layer in 
the first frame to 10096; then set the opacity of the same layer in the last frame to 096. 
When you tween between the two frames, the opacity of the layer is reduced evenly 
across the new frames. 


The two existing frames are called keyframes, and act as reference points for the 
tweened frames. For example, you use tweened frames to fade out from one existing 
frame and then fade in to the next. You can apply the Tween command to a single frame, 
a set of frames, or any pair of adjacent frames. You also can tween the last and first frame, 
which are considered adjacent since the first frame follows the last frame when the ani- 
mation loops. You cannot tween nonadjacent frames. 


Tweening takes all the layer settings of the two keyframes and creates new frames 
between the keyframes, using an average of the keyframe settings. The new frames take 
the delay setting of the earlier frame. See Figure 9-15 for an example of tweening. In 
frame 1, the purple ball is at 50% opacity and is in the upper-left of the image. The black 
ball is at 10096 opacity and is near the lower-left of the image. In frame 4, the balls are 
in opposite corners and their opacities have changed. Frames 1 and 4 are the keyframes. 
Frames 2 and 3 are tweened between the keyframes and modify the layers to show the 
intermediate positions and opacities of the layers. If one frame uses a layer with 10096 
opacity, and the next frame uses a different layer with 10096 opacity, a tweened frame 
would use both layers at 5096 opacity. 
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Figure 9-15 Tweening 


Tweening adds frames to the animation, and increases the file size accordingly. Once you 
add frames by tweening, you can edit them like any other frames. 


To use the Tween command: 
1. In ImageReady, open ball.gif from the Data Disk. 
2. Duplicate the frame in the Animation palette. 


3. In the first frame, position the ball in the upper-left. In the second frame, 
position the ball in the lower-right. These are your keyframes. 


4. Click the Tween button in the Animation palette or select Tween from the 
Animation palette menu. The Tween dialog box opens, as shown in Figure 9-16. 


5. Make sure the All Layers option button is selected to include all layers visible 
in the keyframes. You also could click the Selected Layer option button to 
include only the currently selected layer. As there is only one layer, the choice 
does not matter here. 


6. Make sure the Position, Opacity, and Effects boxes are checked. Selecting 
Position changes the position of layers across frames. Selecting Opacity fades 
layers in or out across frames. Selecting Effects has layer styles fade in or out. 
Here, only the position of the layer changes between the two frames, so 
tweening the opacity and effects will not affect the animation. 


7. The Tween With text box can show First Frame or Previous Frame. In general, 
use this option to select whether to use the preceding or following frame as the 
other keyframe. If you already have both frames selected, you will not be given 
a choice here. 


362 


Chapter 9 Creating Animation for the Web 


8. For Frames to Add, enter 3 to indicate the number of frames you want created 
between the selected keyframes. 


9. Play the animation. You see the ball move smoothly from one corner to 
the other. 


10. Click File on the menu bar, and then click Save Optimized As to save the 
animation to your Chapter 9 project folder as bounce2.gif, and then close 
the animation. 
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Figure 9-16 The Tween dialog box 


OPTIMIZING AND SAVING ANIMATIONS 


Animated GIF images are effectively multiple images in one file. An animations file size 
can easily be several times larger than a similar static image with the same dimensions 
and color depth. Just as you can optimize a Web graphic by reducing extraneous colors 
from the color table, you also can optimize animated GIF images by reducing extrane- 
ous information that affects the animation. It is as important to optimize animated 
images as it is to optimize static ones, perhaps more so because animated image files can 
become very large. You can optimize animated GIF images the same way as normal GIFs, 
and use additional options specific to animations, including setting the frame disposal 
method and using the Bounding Box option. 


Setting the Frame Disposal Method 


When an animation plays, each frame appears in succession. The new frame either com- 
pletely replaces the previous frame, or it covers only part of it so that other parts of the 
previous frame show through. Hold down the Ctrl key and click a frame (right-click in 
Windows) to display the Disposal Method shortcut menu, as shown in Figure 9-17. Here 
you can set an option called the frame disposal method for each frame. An icon under 
the frame indicates the method chosen for that frame. Select a disposal method when 
working with layers that include transparency. This specifies whether the current frame 
will be visible through the transparent areas of the following frames. 
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Figure 9-17 The Disposal Method shortcut menu 


You can set the frame disposal method either to Restore to Background or to Do Not 
Dispose. In the first case, the new frame completely replaces the old one. In the second 
case, the new frame covers only part of the previous frame, allowing areas of the previ- 
ous frame to show through the transparent areas of the new frame. Completely restor- 
ing frames results in larger files because the animation requires a full-size area for each 
frame. Choosing Do Not Dispose allows the animation to reuse parts of previous frames. 
This can result in smaller files. 


In ImageReady you also can set the disposal method to Automatic, which finds the best 
combination of disposing and not disposing. You create the smallest files when not dis- 
posing frames, slightly larger files with the automatic method, and still larger files when 
restoring every frame. The drawback to not disposing frames is that information from 
previous frames might show through. The Automatic setting is required for the auto- 
mated optimization in ImageR eady. 


To choose a disposal method, select one or more frames. Hold down the Ctrl key and 
click the frame for which you want to set a disposal method (right-click in Windows). 
You see the Disposal Method shortcut menu. Select one of the three options according 
to the following descriptions: 


m The Automatic method disposes of the current frame if the next frame 
contains transparency, and keeps the current frame if the next layer is com- 
pletely opaque. For most animations, this method produces good results. 


a The Do Not Dispose method keeps the current frame and displays it 
through the transparent areas of the next frame. 


a The Restore to Background method disposes of the current frame and 
displays the next frame over the background color. 


To set the disposal method: 
1. Open ball.gif from the Data Disk. 


2. Duplicate the frame. Position the ball on the left in frame 1 and position it 
on the right in frame 2. 


364 Chapter 9 Creating Animation for the Web 


3. Open the Disposal Method context menu for frame 1 (Ctrl+click in 
Mac, right-click in Windows). 


4. Set the disposal method to Do not dispose. 


5. Play the animation in ImageR eady. You should not see any difference 
between the two frames. 


6. Preview the animation in a browser. You should see the ball stay in place on 
the left and blink on and off on the right. The first frame is not disposed, and 
remains visible even when the next frame is shown. 


7. Set the disposal method for the first frame to Restore to background. Set 
the disposal method for the second frame to Do not dispose. 


8. Preview the animation in a browser. Each frame should appear in turn. 
Although the last frame is set to Do not dispose, all frames are disposed at the 
end of a loop, leaving an empty background when frame 1 appears again. 


9. Make sure the Transparency box is checked in the Optimize palette, click 
File on the menu bar, and then click Save Optimized As to save the ani- 
mation to your Chapter 9 project folder as bounce3.gif. 


To take advantage of the different disposal types, use transparency when possible, and use 
only opaque pixels for new information and for blocking pixels in previous frames. For 
example, in Figure 9-18 you can see that in the second frame, eveything is transparent 
except for the new information and a small area that masks the information from the 
previous frame. 
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Figure 9-18 Blocking areas in layers 
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ImageReady does not show the results of not disposing of the frames. You must preview 
the animation in a browser to see how it is affected. 


Optimizing Animations 


You can optimize the layers of an animation the same way you would optimize any other 
image—by adjusting the settings in the Optimize palette to reduce colors or to set com- 
pression. You can also optimize frames to include only the areas that change between 
frames. 


To optimize an animated image: 
1. Open bounce3.gif if it is not still open. 
2. In the Optimize palette, select the setting named GIF 32 Dithered. 


3. From the Animation palette window, select Optimize Animation. This 
opens the Optimize Animation dialog box, as shown in Figure 9-19. 


4. In the Optimize Animation dialog box that appears, check both the 
Bounding Box and the Redundant Pixel Removal box. EN 


5. Click File on the menu bar, and then click Save Optimized As to save the 
animation to your Chapter 9 project folder as bounce3a.gif. 


— Optimize By 
Bounding Box 


Cancel 
Iv. Redundant Pixel Removal cce | 


Figure 9-19 The Optimize Animation dialog box 


Selecting the Bounding Box option trims each frame to the area that is different from 
the previous frame, and then displays a background color in place of the similar pixels. 
This helps reduce the file size of the finished animation. You can see the bounding box 
of an image by selecting the Move tool, and then selecting Show Bounding Box in the 
Options bar.You see a dashed line around the foreground pixels in an image. The bound- 
ing box is shown in Figure 9-20. 


The Redundant Pixel Removal option takes all pixels that are identical between frames 
and makes them transparent. The frame disposal method must be set to Automatic for 
this option to have an effect. Removing redundant pixels eliminates unnecessary image 
data from the animation, creating a smaller file. 
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Figure 9-20 Bounding Box option 


After optimizing the animation this way, use the Optimize palette to optimize the image 
as you would any other. Reduce the color and use dithering where appropriate. For most 
editing, you should use the Original view in the Image window because you can use all 
the layer-editing tools in this view. In the Optimize view, you can see the effects of dif- 
ferent optimization settings, but some layer-editing tools are disabled. 


When optimizing, make sure to use the Perceptual, Adaptive, or Selective color reduc- 
tion method. This guarantees consistent color across the frames of the animation. Make 
sure also to use the GIF format optimization. Only GIF files support the animation dis- 
cussed here, so optimizing the animation as a JPEG or PNG precludes the image from 
being used as an animation. 


Designers used to optimize each frame individually, using a separate palette for each 
frame, and dither each frame slightly differently. This resulted in an unsightly flickering 
effect that detracted from the quality of the animation. Fortunately, in ImageReady there 
is only one palette used for all frames, and the dithering is automatically kept consistent 
across frames. 


Saving Animations 


You can save your animations as animated GIFs, QuickTime movies, or Photoshop files. 


To save the file as an animated GIF select Save Optimized As from the File menu and 
enter a filename. You can then use the image in a Web page as you would any other image. 
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In the HTML code, reference the image with an IMG tag. You can even use animated 
GIFs as background images, although this makes any text on the page difficult to read. 


To save an animation as a QuickTime movie, select Export Original from the File menu 
to open the Export Original dialog box. Then click the Save as type list arrow and click 
QuickTime Movie. QuickTime must be installed on your computer for this option to 
work. Select a name and location, and adjust the compression settings. You can view the 
QuickTime movie in a special viewing application or in a browser that has the 
QuickTime plug-in installed. You also can import the animation into applications such 
as AfterEffects that support Quick Time. 


Once the movie is in the QuickTime format, you can use software such as AfterEffects 
or Sparkle to convert the animation to other formats, such as MPEG. Users can view 
QuickTime movies in their browsers, but only if they have the proper plug-in installed. 
If they do not have the plug-in, they can download the movie and play it using any of 
a variety of free and commercial animation software. 


You also can save the animation as a simple Photoshop (PSD) file. You cannot view the 
image in a browser, but you can preserve all layers and frames if you need to postpone 
completion of the project. Select Flatten Frames into Layers from the Animation palette 
menu. This creates a composite layer for each frame, containing all the layers visible for 
the frame. 


USING 


ANIMATION ON THE WEB 


Animated images can make a Web page dynamic without requiring interaction from the 
user. However, because animated images usually require a longer download time than 
do their static counterparts, you should use them only when the animation is necessary. 
For example, a good time to use an animated image is when you already have many col- 
ored images on a page and need to have one image in particular stand out from the rest. 
However, you use too many animated images, they will reduce the emphasis of the actual 
content of the page. 


Animated images also draw more attention than do still images, which makes them dis- 
tracting to some viewers. Animated GIFs are the graphical equivalent of the BLINK tag 
in HTML. Both flash and are very eye-catching, yet quickly become a nuisance. To avoid 
annoying your users, limit your animations to no more than one or two per page. 


Creating Animated Icons 


A colored graphical bullet has more impact than a bullet created in HTML. Similarly, an 
icon with the word "New!" has more impact than a bullet without any text. If you need 
bullets to draw attention to a specific piece of text, consider using an animated bullet. 


A common animated bullet is an arrow pointing to the right, indicating that certain text 
is important. You should use such a bullet only when the text being emphasized is so 
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important that merely a bright icon is insufficient. Use an animated bullet to guarantee 
that the user notices it. 


Creating News Bulletins 


You can create a type of news ticker with an animated GIF that displays headlines of 
news items in a rectangle on a page, and then updates those items every few seconds, 
cycling through all the frames. This is an effective way to display dynamic content that 
changes over time without having to use client-side programming such as JavaScript. 


Create an animated GIF with at least two frames of text over a background. Set each 
frame to delay for four or five seconds—longer for a lot of text. Each frame should be 
different, so dispose of the frames to the background. However, when working with text 
you can use very low color depth, which results in small files. For simple black-and-white 
text, you can use one-bit color depth. For smooth, anti-aliased text, use two- or three-bit 
color depth. 


Graphical news tickers are not often used because when the text is changed a new image 
file must be created. However, if you do not have the resources to implement a Java- or 
DHTML-based news ticker, this is a simple, effective solution. 


Creating Banner Ads 


Perhaps the most common use of animated GIF images is in advertising. Most com- 
mercial Web pages display a banner ad at the top of the page, and often use smaller ads 
on the side. In the mid-1990s there were no standards for advertising on the Web, but 
now all advertisers and sites that display advertising agree on at least some standards. 
Some of these standards still vary from site to site, but consistent standards make it easier 
to measure the value of ads. These standards are discussed in the following sections. 


Advertising on Web sites should be prominent so that users see the ad. The advertiser 
also should be confident that the message is clear. On the other hand, if the ad is too 
visible and eye-catching, it will draw attention away from the content of the page. 


Web sites usually develop a list of constraints for advertisements that limit the impact of 
the ads. The designers who work for advertising companies then have to create attrac- 
tive, sophisticated ads that do not violate the parameters set by the hosting Web site. 


Using Conventional Dimensions 


There are several standard sizes for Web ads, but the most common is the banner ad, 
which is always 468 pixels wide and 60 pixels high. Web designers agreed on this size 
because on a standard 72-dpi monitor the ad appears as 6% inches wide and % of an inch 
high. If the Web page is printed on a standard 84 X 11-inch sheet of paper, the entire 
ad prints even if the page has a one-inch margin. 
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Most Web pages are about 600 pixels wide, which leaves enough room for a 14-inch 
logo and a standard banner ad across the top of the page. 


Another common standard is for the half-banner ad, which is 234 pixels wide and 60 
pixels high. Some sites display two half banners across the top of the page instead of one 
full one. 


A common size for ads positioned on the side of a page is 125 pixels square. Many com- 
mercial sites use the convention of placing a column along the left side of their pages to 
contain navigation elements. A common size for these columns is 125 pixels because it 
is wide enough to display a few words on the same line, but not so wide that it inter- 
feres with the appearance of content in the main area of the page. Ads for these columns 
need to be 125 pixels wide in order to fit. 


Constraining File Size 


The sites that display ads shoulder the burden for the file size of advertisements. Even if 
the ad is loaded from a server other than the one that serves the Web page, the contents 
of the page might not render completely until the ads have finished downloading. 


Sites that accept advertising usually limit the size of ads to about 15 K. Files this size 
take about six seconds to download using a 28.8 Kbps modem. Ads with larger file sizes 
take longer to load, and further delay the display of the actual page content. This 15 K 
size constraint forces designers to optimize their animations and be prudent about the 
amount of animation and effects they include. Some sites require that ads be as small as 
12 or even 10 K. 


Limiting Visual Impact 


Another concern for sites that host ads is how the presence of the ads affects their own 
page design and layout. It can be frustrating for Web designers to create a unified color 
scheme and style, only to have it dominated by an ad at the top of the page that uses 
conflicting colors, sometimes producing a garish effect. In some cases, the ad is the most 
colorful element on the page and the only animated one. When this occurs, readers are 
often distracted from the actual content of the page. Users also can find animated ads 
annoying, and avoid sites that use too many of them. 


To control the flashiness of ads, many Web sites place restrictions on animation in adver- 
tisements. A common restriction is on the amount of looping. Some sites allow only one 
loop per ad; some allow up to three or four loops. Because your ad might loop only 
once or a few times, be sure to place all relevant information in the last frame. For exam- 
ple, show the name of the product being advertised and the URL of the site. This way, 
when the animation freezes on the final frame, it still provides important information. 
Set a longer delay for the final frame than for the other frames. While the ad loops, users 
need time to read the text you placed there. A general rule of thumb is to allow one 
second for each line of text, and a delay of one to two seconds for the final frame of a 
banner ad. 
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Some sites also restrict the number of frames in an ad to four or five. This forces the 
designer to use just a few frames with long delays rather than many frames with short 
delays. This also results in less flashy ads. 


Evaluating the Effectiveness of Banner Ads 


Web ads are sold in blocks of a thousand, at a rate determined by the Web site that is 
paid to display the ads. Ad rates are measured in CPMs, which stands for “cost per mille" 
or “cost per thousand.” CPMs can range from $1 to over $100 per thousand ads dis- 
played. This means that displaying a single ad can cost as little as a tenth of a penny or 
as much as a dime. 


Web advertising is less expensive than most other forms of advertising because creating 
and displaying an animated GIF is much simpler than creating a radio or TV spot, or a 
full-page glossy ad for a magazine. However, advertisers still need to know if their invest- 
ment is worth the cost. 


The way to measure the effectiveness of an ad on the Web is to measure the click- 
through-rate (CTR) of the ad. If 1000 people visit a Web page which displays a par- 
ticular ad, and ten people click the ad, then the CTR for that ad is 10/1000 or 1%. 


In the early days of the Web, CTRs were sometimes as high as 25%, meaning that one 
out of four people clicked ads. In the late 1990s, average CTRs decreased to 1% or 2% 
as people began ignoring banner ads. Today the average CTR is under 1%. Some use 
this to argue that advertising on the Web is a waste of money. However, even if people 
do not click the ad, they still see it and are aware of it to some degree. Advertising on 
the Web is becoming more like advertising in traditional media such as magazines or 
television. In these media, viewers generally cannot interact with an ad, and an ad pro- 
vides branding instead of an actual link. The same is true for Web ads. 


Using Banner-Swapping Services 


Most people with small Web sites cannot afford to buy advertising on larger sites, and 
cannot display ads themselves because their sites are not well-trafficked. This creates a 
problem because the owners of the sites cannot advertise their products or services. One 
solution is to use a link exchange service. These services are usually free and provide a 
way to promote small Web sites. Small Web sites agree to display other sites’ banner ads 
on their site, and the other sites do the same. In addition to promoting a site, banner ads 
can add authority to that Web site. A site without advertisements may be cleaner and 
more attractive, but a site with ads is clearly business-oriented. Displaying banner ads on 
your site can help distinguish your site from the many nonprofessional personal Web 
pages. Link exchange services also let you test different ad prototypes to see which have 
the highest CTR. You then can introduce high-CTR ads into paid campaigns without 
having to guess whether they will be successful. 
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CHAPTER SUMMARY 


a Animated Web graphics have four dimensions: width, height, (color) depth, 
and time. 


D GIF animation displays a sequence of GIF images collected into one file. In 
ImageReady, you assign each image to a frame and organize the frames into 
a sequence. 


D GIF animation has advantages over other formats because it does not require 
special plug-ins or coding to be displayed on Web pages. 


a In ImageReady, each frame displays a combination of available layers. Each layer 
may be visible in multiple frames. 


a Unlike most other animation formats, GIF animation is frame-based, not 
time-based. 


a You can adjust the delay of each frame individually, and adjust how many times 
the sequence repeats. 


D The frames and layers in an animation can be optimized like any other GIF 
image. You can optimize the animation by eliminating pixels that repeat 
across frames. 


a Animation can easily be overused in Web pages; you should be discreet and use 
animation only when it serves a purpose. 


a Most sites that accept advertising have strict guidelines about the banner ads 
they display. 


REVIEW QUESTIONS 


1. What would be an appropriate format to use if you had to have 30 fps 
photographic-quality video? 


a. Flash 
b. GIF 
c. JPEG 
d. MPEG 
2. Which format is not vector-based? 
a. Flash 
b. Java 
c. ShockWave 
d. Streaming Video 
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3. Which frame rate creates the most flicker? 
a. 2 fps 
b. 15 fps 
c. 24 fps 
d. 30 fps 


4. What animation format does not require a browser plug-in or separate viewing 
application? 


a. Flash 
b. GIF 
c. MPEG 
d. QuickTime 
5. Which of the following sentences about creating animations in ImageReady is true? 
a. Duplicating a frame adds a new frame and new layers. 
b. Duplicating a frame adds a new frame but cannot add new layers. 
c. Pasting a frame adds a new frame and new layers. 
d. Pasting a frame adds a new frame but cannot add new layers. 
6. What is NOT a reason to preview animations in a Web browser? 
a. Previewing in ImageReady does not always accurately display animation looping. 
b. Previewing in ImageReady does not always accurately display frame delay. 
c. Previewing in ImageReady does not display frame disposal. 
d. Previewing in ImageReady does not display optimization information. 


7. What is NOT a way to prevent the contents of a layer from being displayed as 
part of an animation frame? 


a. Delete the layer. 

b. Deselect the layer. 

c. Deselect the visibility icon in the layer. 
d. Set the opacity of the layer to 0%. 


8. Which of the following layer changes affect all frames that call the layer and 
cannot be used to animate across frames? 


a. Layer styles 
b. Opacity 

c. Position 

d. Scale 


10. 


11. 


12. 


13. 


14. 
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. To what does frame delay refer? 


a. It is another name for frame rate. 
b. The number of frames per second 
c. The number of loops per second 
d. The number of seconds per frame 
What is the fastest frame rate possible with GIF animation? 
a. 30 fps 
b. 72 fps 
c. 100 fps 
d. The processing speed of the computer 
What is tweening? 
Duplicating keyframes and placing the new keyframes in between the new frames 


a. 
b. Duplicating intermediate layers 


o 


. Combining layers by averaging their settings 


[em 


. Creating new frames that show the same layers as the keyframes, and then aver- 
aging the layer settings 


What optimization settings are permitted for GIF animations? 
a. GIF only 

b. GIF or JPEG 

c. GIF or PNG 

d. GIF or PNG-8 

Which frame disposal method produces the smallest files? 

a. Automatic 

b. Bounding Box 

c. Do not Dispose 

d. Restore to Background 


What frame disposal method must you use to use the redundant pixel removal 
optimization? 


a. Automatic 
b. Bounding Box 
c. Do not Dispose 


d. Restore to Background 
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15. What color reduction method should you use when optimizing animated GIFs? 
a. Diffusion 
b. Perceptual, Selective, or Adaptive 
c. System colors 
d. Web palette 
16. How do you display an animated GIF image in a Web page? 
a. By streaming the animation file 
b. With a browser plug-in 
c. With a separate image-viewing application 
d. With a standard IMG tag in HTML 
17. What is an appropriate frame delay for graphical news tickers? 
a. Half a second per frame 
b. One second per frame 
c. Two seconds per frame 
d. Four seconds per frame 
18. What are the dimensions of conventional banner ads? 
a. 460 X 68 
b. 468 X 60 
c. 480 X 60 
d. 488 X 68 
19. What is NOT a typical constraint placed on banner ads? 
a. No larger than 12 K 
b. No looping 
c. No more than four frames 
d. No transparency 
20. What is a typical click through rate (CTR) for banner ads? 
a. Below 0.196 
b. Below 196 
c. Below 10% 
d. Below 25% 
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HANDS-ON PROJECTS 


Project 1: Creating an Animation from Multiple Images 


WA You have a 3-D modeling and animation program that exports separate files for each 
frame of the animation. Collect these files and create an animated GIF from them. 


Complete these steps: 
1. On your hard drive, create a new folder named project 9-1. 


2. In ImageReady, click File on the menu bar, point to Import, and then click 
Folder as Frames. In the Browse dialog box, locate and select the cube folder 
on the Data Disk and then click OK. This creates three frames and three layers in 
a new ImageReady file. 


3. Select frame 1 and make sure that the visibility icon is showing for only the bot- 
tom layer in the Layers palette. 


. Select frame 2 and make sure the visibility icon is showing for only the middle layer. 


. Select frame 3 and make sure the visibility icon is showing for only the top layer. 


. Make sure the Looping Option is set to Forever. 
. Select all three frames and set the delay value to 0.1 seconds. 


. In the Optimize palette, select the preset named GIF 128 No Dither. 


o ON HD Ui A 


. Open the Animation palette menu and click Optimize Animation. Check both 
boxes in the Optimize Animation dialog box, if necessary, and click OK. 


10. Preview the animation in a browser to check the optimization and speed. 
11. Click the File menu, and then select Save Optimized As. 


12. Save the animation as cube.gif in the project 9-1 folder. 


Project 2: Animating Multiple Layers 


Create an animation of a jittery house from a file with multiple layers. 


Complete these steps: 
1. In ImageReady, open image file house.psd from the Data Disk. 


2. Create two new frames. Make sure the visibility for all layers is turned on for 
all frames. 


3. Select frame 1. Select the layer named door and in the Image window, move it 
near the lower-left of the yellow square. 


4. Move the window layer near the center-right of the yellow square. Move the 
roof layer near the top-center of the yellow square. 
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5. Select frames 2 and 3 and repeat the process described in Step 4. Do not worry 
about placing the elements exactly as you did for frame 1. In frame 3, place the 
elements so that their edges line up exactly with the edges of the yellow square. 


. Select all frames and set the delay value to 0.1 seconds. 
. Set the looping to 5 times. 
. In the Optimize palette, select the preset named GIF 64 No Dither. 
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. Open the Animation palette menu, click Optimize Animation, and accept both 
options. 

10. Preview the animation in a browser to check the optimization and speed. 

11. Click the File menu, and then select Save Optimized As. 


12. Save the animation as house.gif in a new folder named project_9-2. 


Project 3: Creating a Fading Text Animation 


You want to animate a simple text image, but it needs to fade in and out, rather than 
move. You could use the BLINK tag in HTML, but you want a more subtle effect. 


fands-on 
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Complete these steps: 
1. In ImageReady, create an image that is 125 pixels wide and 50 pixels high. 


2. Use the Type tool to add the text E-Mail Us! in blue using a bold serif font, and 
using a size that fits within the image. 


3. Click the New Frame button to duplicate the frame. 
4. Select the second frame and set the opacity of the text layer to 40%. 


5. Click the Tween button. In the Tween dialog box, select All Layers and make 
sure Opacity is selected. Set the Tween with option to Previous Frame. Set 
Frames to Add to 2. 


6. Click OK. Two new frames are added that display the same layer at 80% and 
60% opacity. 

7. Select the two middle frames and click the New Frame button to duplicate 
the frames. 


8. Drag these new frames to the far right of the Animation palette, reversing their 
order. The opacity of the frames should be, in order: 100%, 80%, 60%, 40%, 60%, 8096. 


9. Select all the frames and set the delay value to 0.2 seconds. 


10. In the Optimize palette, set the format to GIF, the Colors to 8, and the dither 
to Diffusion. 


11. In the Animation palette menu, select Optimize Animation and accept both 
options. 
12. Preview the animation in a Web browser and make any changes, if necessary. 


13. Click File on the menu bar, click Save Optimized As, and save the animation as 
email.gif in a new folder named project_9-3. 


Hands-on Projects 377 


Project 4: Creating a Rotating Animation 


You want to create another simple animation. This one will rotate rather than change 
position, so you need multiple layers. 


Complete these steps: 
1. In ImageReady, open image file lightbulb.tif from the Data Disk. 
2. Duplicate the background layer and name the new layer lightbulb 1. 
3. Create a new layer behind it and name this layer glow. 
4. Set the foreground color to pure yellow (Zffff00). 
5 


. Select the Paintbrush tool and select a feathered brush of about 65 pixels in 
diameter. 


6. Click once in the center of the glow layer to create a yellow spot behind the 
lightbulb image. 


7. Select Layer 1 in the Layers palette. 


8. Click Edit on the menu bar, point to Transform, and then click Rotate. A 
transformation box appears around the lightbulb image. 


9. Drag the anchor point so that it is over the center of the yellow spot. 


10. Drag a corner tab of the transformation box to rotate the lightbulb image by 
about 10 degrees. Double-click inside the box to set the transformation. 


11. Select the layer named lightbulb 1 in the Layers palette and rotate it the same 
way as you did in Step 10, but in the opposite direction. 


12. Create a new frame. 
13. Select the first frame and deselect the visibility icon for the Layer 1 layer. 
14. Select the second frame and deselect the visibility icon for the lightbulb 1 layer. 


15. Click the Play button in the Animation palette. The lightbulb image swings back 
and forth centered around the yellow glow. 


16. Select both frames and set the delay value to 0.3 seconds. 
17. In the Optimize palette, select the preset named GIF 64 No Dither. 


18. In the Animation palette menu, select Optimize Animation and accept both 
options. 


19. Click File on the menu bar, click Save Optimized As and save the animation as 
idea.gif in a new folder named project 9-4. 


Project 5: Simulating Acceleration 


==) You want an animation of a ball bouncing, but you want it to accelerate as it rises and 
falls. You need to adjust the frames and layers to simulate acceleration. 


Complete these steps: 
1. In ImageReady, open image file ball.gif from the Data Disk. 


378 


uson 


Project 


Chapter 9 Creating Animation for the Web 


2. 


Use the Move tool in the Image window to drag the ball to the bottom of 
the image. 


. Duplicate the frame in the Animation palette. 


. Select the second frame and use the Move tool to drag the ball to the top of 


the image. 


. Click the Tween button and add 3 new frames. 


. Select the first and last frames, but not the ones between them, and click the 


'Tween button again to add 3 more frames at the end of the animation. 


. Play the animation. The ball should move up and down at a constant speed. 

. Set the delay of frame 1 to No Delay. 

. Set the delay of frames 2 and 8 to 0.1 seconds. 

. Set the delay of frames 3 and 7 to 0.2 seconds. 

. Set the delay of frame 5 to 0.5 seconds. 

. Delete frames 4 and 6. 

. Select frame 1. Click Layer on the menu bar, point to Layer Style, and then 


click Drop Shadow. In the Layer Style palette, set the Distance to 8. 


. In the Optimize palette, select the preset named GIF 32 No Dither. 
. In the Animation palette menu, select Optimize Animation and accept both options. 


. Preview the animation in a browser. The ball should appear to move quickly near 


the bottom of the image and to move more slowly near the top. 


. Click File on the menu bar, click Save Optimized As, and save the animation as 


ball bounce.gif in a new folder called project 9-5. 


Project 6: Creating a Graphical News Ticker 


You want to highlight some news headlines on your home page, but do not want to take 
up more than about one square inch to do so. Create a slide show of images containing 
text to use as a space-saving news ticker. 


Complete these steps: 


1. 
2. 


In ImageReady, create an image that is 96 pixels wide and 96 pixels high. 


Select the Type tool and select a serif font of 14 p. Set the foreground color to 
black (#000000). 


. Click in the Image window and type New software products in our reviews 


section! Add blank lines to make the text fit on four lines. Use the Move tool to 
center the text layer in the image. 


. Open the Animation palette menu and make sure that the New Layers Visible In 


All Frames option is deselected. Also make sure the Add Layer To New Frames 
option is deselected. 
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5. Select the frame and duplicate it twice by clicking the Duplicate Frame button. 


6. Select the layer and duplicate it twice by selecting Duplicate Layer in the 


Layers palette menu. 


7. Select the first frame; only the bottom text layer should have visibility turned on. 


8. Select the second frame. Set the visibility in the Layers palette so that only the 


middle text layer is visible. 


. Select the middle text layer, and select the Type tool. Edit the text in the 


middle text layer to read New features added to our community forum! 


. Select the third frame; only the top text layer should have visibility turned on. 
. Select the top text layer. Edit the text in the top text layer to read New images 


in our image library! 


. Select all frames and set the delay value to 3 seconds for each frame. 
. Set looping to Forever. 


. In the Optimize palette, select the preset named GIF 128 No Dither. Then 


reduce the colors to 8. 


. In the Animation palette menu, select Optimize Animation and accept both options. 
. Preview the news ticker in a Web browser to make sure the animation plays properly. 


. Click File on the menu bar, click Save Optimized As, and save the animation as 


news.gif in a new folder named project 9-6. 


Project 7: Creating a Banner Ad 


Create a simple five-frame banner using text elements. 


Complete these steps: 


1. 


In ImageReady, create an image that is 468 pixels wide and 60 pixels high with a 
white background. 


. Convert the background layer to a normal layer by selecting Layer Options from 


the Layers palette menu. Change the name of the layer to background. Click OK. 


. Set the foreground color to dark teal (#003366). Use the Paint Bucket tool to 


fill the layer. 


4. Create four new layers. Name them art, design, graphics, and url. 


5. Set the foreground color to pure yellow (#ff£f00). Select the art layer. Select the 


Type tool. 


6. Use a 24 px bold serif font and add the word Art to the layer. 
7. Click Layer on the menu bar, point to Rasterize, and then click Type. This ren- 


ders the vector-based text into pixels. 


. Move the text layer to the upper-left of the image. 
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9. Select the design layer. Add the word Design and rasterize the text. Drag the 
text to the top-center of the image. 


10. In the graphics layer, add the word Graphics and drag it to the upper-right of 
the image. Rasterize the layer. 


11. Set the foreground color to pure red (#ff0000). Using a sans serif text such as 
Arial or Helvetica, add the URL for your site or your class’s Web site to the URL 
layer. Drag it to the bottom center of the image. 


12. Duplicate the frame. Select the first frame and select the background layer. Set 
the opacity of this layer to 609^. 


13. Select both frames and click the Tween button to add 3 intermediate frames. 


14. Select the last frame and set the opacity of the art, design, and graphics 
layers to 80%. 


15. Select the first frame and adjust the visibility icons in the Layers palette so that 
only the background and art layers are visible. 


16. Select the second frame and adjust the visibility icons so that only the back- 
ground and design layers are visible. 


17. Select the third frame and adjust the visibility icons so that only the background 
and graphics layers are visible. 


18. Select the fourth frame and adjust the visibility icons so that only the back- 
ground and url layers are visible. 


19. Select the fifth frame and make all layers visible. 

20. Select the first four frames and set the delay value to 1 second. 

21. Select the last frame and set the delay value to 2 seconds. 

22. Set the looping to 4 times. 

23. In the Optimize palette, select the preset named GIF 128 No Dither. 

24. In the Animation palette menu, select Optimize Animation and accept both options. 
25. Preview the banner in a Web browser to make sure the animation plays properly. 


26. Click File on the menu bar, click Save Optimized As, and save the animation as 
ad.gif in a new folder named project 9-7. Also save the unoptimized file, 
including all layer information, as ad2.psd in the same folder. 


Project 8: Manually Optimizing an Animation 


All the previous projects for this chapter have used the default Automatic frame disposal 
method. This usually produces adequately small files. You can sometimes attain even 
smaller files by not disposing of frames and manually blocking out pixels that change 
between frames. 


ehuson 
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Complete these steps: 


1. In ImageReady, create an image that is 60 pixels square. 
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23. 


24. 
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. Set the foreground color to black. 


. Use the Elliptical Marquee tool to create a circular selection area that fits the 


edges of the image area. 


. Stroke the edges with black to make a 2-pixel-wide black ring. 
. Create four empty layers. Name them 12, 3, 6, and 9. 
. Duplicate the frame so that you have a total of four frames. 


. Select the first frame and set the visibility so that only the background and the 


12 layer are showing. Select the 12 layer. 


. Select the Paintbrush tool and select a nonfeathered brush that is about 5 pix- 


els in diameter. 


. Draw a short, black, vertical line inside the ring near the top of the image. 


. Select the second frame and set the visibility so that only the background and 


the 3 layer are showing. Select the 3 layer. 


. Draw a short horizontal line inside the ring near the right side of the image. 


. Select the third frame and set the visibility so that only the background and the 


6 layer are showing. Select the 6 layer. 


. Draw a short vertical line inside the ring near the bottom of the image. 


. Select the fourth frame and set the visibility so that only the background and 


the 9 layer are showing. Select the 9 layer. 


. Draw a short horizontal line inside the ring near the left side of the image. 

. Select all frames and set the frame disposal method to Automatic. 

. In the Optimize palette, select the preset named GIF 128 No Dither. 

. In the Animation palette menu, select Optimize Animation and accept both options. 


. Preview the animation in a Web browser. The file size of the animation will be a 


few kilobytes. 


. You can reduce the file size. Select all frames and set the frame disposal method 


to Do Not Dispose. 


. Preview the animation in a Web browser. The size of the animation file will be 


about half its original size. However, the four lines persist when their frames appear. 


. Set the foreground color to white and select a Paintbrush tool brush that is 


slightly larger than the one you used before. 


Select the second frame and select the 3 layer. With the Paintbrush, paint over 
the area occupied by the vertical line in the 12 layer. Temporarily make the 12 
layer visible so that you can see what you are doing. But make sure to paint inside 
the 3 layer. 


Select the third frame and select the 6 layer. With the Paintbrush, paint over the 
area occupied by the lines in the 12 and 3 layers. 
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25. Select the fourth frame and select the 9 layer. With the Paintbrush, paint over 
the area occupied by the lines in the 12, 3, and 6 layers. 


26. Preview the animation in a Web browser. The size of the animation file will be 
larger than before, but it will be still about two-thirds of the file size using auto- 
matic optimization. 


27. Click File on the menu bar, click Save Optimized As, and save the animation as 
clock.gif in a new folder named project 9-8. 


CASE PROJECT 


Create two animated ads for your Web site. One should be 468 X 60 pixels, and the 
other should be 125 X 125 pixels. Both should be under 10 K each. They can have as 
many frames as you need, but should loop a finite number of times. The last frame in 
both animations should contain all the important information about your Web site, 
including a very brief description and the URL.The last frame of each animation should 
have a delay of at least a second and a half. 


